<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript" src="/scripts/jquery-3.4.1.min.js"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <script th:src="@{/layui/layui.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}" media="all"/>
    <link rel="icon" href="/img/ico.png" sizes="32x32">
    <title>code generate</title>
    <style>
        li {
            padding-top: 10px;
        }

        .layui-tree-txt {
            color: white;
        }

        #treeDiv {
            position: fixed;
            width: 300px;
            height: 100%;
            z-index: 999999;
            background-color: #262A2D;
        }

        #data {
            height: 100%;
            width: 100%;
            position: absolute;
            display: flex;
            flex-direction: column;
        }

        .parent {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div style="width: 100%;height: 100%">
    <div class="parent">
        <div id="treeDiv" style="-webkit-overflow-scrolling: touch; overflow: scroll;">
        </div>
        <div id="data">
            <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
            <p class="titleDiv"
               style="height: 60px; background-color:#1B1F23;line-height: 60px;margin-left: 300px">
                &nbsp; &nbsp;文件名称：<span class="fileName"></span>
                <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm btn" onclick="copy()">copy
                </button>
            </p>
            <div style=" flex:1;background-color:white;-webkit-overflow-scrolling: touch; overflow: scroll;padding-left: 300px">
                <pre class="layui-code">
                </pre>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript"
        src="http://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script>
<script>
    layui.config({
        base: '../layui_exts/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        protree: 'proTree/protree'
    }).use(['protree', 'tree', 'code'], function () {
        var protree = layui.protree;
        var tree = layui.tree;
        //后台传入的 标题列表
        $(function () {
            // 获取url中的值
            $.ajax({
                type: "POST",
                dataType: 'text',
                contentType: "application/json;charset=UTF-8",
                url: "/file/getFileTree?fileTargetSrc=" + getUrlParam("fileTargetSrc"),
                //请求成功
                success: function (result) {
                    var obj = JSON.parse(result);
                    //执行示例
                    //渲染
                    var treeDiv = tree.render({
                        elem: '#treeDiv'  //绑定元素
                        , data: obj
                        , click: function (obj) {
                            if (!obj.data.isDirectory) {
                                $(".fileName").html(obj.data.title);
                                path = obj.data;
                                // 请求网页源码
                                $.ajax({
                                    type: "POST",
                                    dataType: 'text',
                                    contentType: "application/json;charset=UTF-8",
                                    url: "/file/getCode",
                                    data: path.filePath,
                                    //请求成功
                                    success: function (result) {
                                        //渲染
                                        result = result.replace(/</g, "&lt;")
                                        result = result.replace(/>/g, "&gt;")
                                        // console.log(result);
                                        $(".layui-code").html(result);
                                        // layui.code({
                                        //     encode: true //是否转义html标签。默认不开启
                                        //     , skin: 'notepad' //如果要默认风格，不用设定该key。
                                        // }); //引用code方法
                                    }
                                });

                            }
                        }
                    });
                }
            });
        });

    });

    var path = {};

    var clipboard = new Clipboard('.btn', {
        text: function () {
            return $(".layui-code").html();
        }
    });
    clipboard.on('success', function (e) {
        layer.msg("<em style='color:black'>复制成功</em>", {icon: 1});
    });

    clipboard.on('error', function (e) {
        console.log(e);
    });

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

</script>

</body>
</html>